<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文章分享</title>
	<link rel="stylesheet" href="__PUBLIC__/web/css/bootstrap.css">
	<link rel="stylesheet" href="__PUBLIC__/web/css/common.css">
	<link rel="stylesheet" href="__PUBLIC__/web/css/works-share.css">
    <link rel="stylesheet" href="__PUBLIC__/web/css/article_share.css">
</head>
<body>
	<nav class="navbar navbar-default">
	    <div class="container">
	        <!-- Brand and toggle get grouped for better mobile display -->
	        <div class="navbar-header">
	            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
	                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	                <span class="sr-only">Toggle navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	            </button>
	            <a class="navbar-brand" href="#"><img src="{$logo_img}" alt="找设计"></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	            <ul class="nav navbar-nav">
	                <li>
	                    <a href="{:U('Web/index')}">首页<span class="sr-only">(current)</span></a>
	                </li>
	                <li>
	                    <a href="{:U('Web/works_share')}">作品分享</a>
	                </li>
	                <li class="active">
	                    <a href="{:U('Web/article_share')}">文章分享</a>
	                </li>
	                <li>
	                    <a href="{:U('Web/material_collection')}">素材收集</a>
	                </li>
	                <li>
	                    <a href="{:U('Web/contact')}">联系我们</a>
	                </li>
	            </ul>
	        </div>
	    </div>
	</nav>
	<!--内容标题-->
	<h2 class="content-title1">
		<div class="title-wrap">
			<span class="title-cn">文章分享</span><img src="__PUBLIC__/web/img/index_pic_two.png" alt=""><sapn class="title-en">Work share</sapn>
			<span class="title-state ">Utmost for the well-known enterprises at home and abroad to provide a full range of multi-platform solution ..</span>
		</div>
	</h2>
    <!--<div class="nav-change">
    	<img src="img/change_03.png">
    </div>-->
	<!--分类导航-->
	<div class="nav-classification">
		<div class="nav-wrap">
			<div class="nav-top">
				<i class="<?php echo $_GET['type']==web || $_GET['type']==""?active:'';?>"><a href="{:U('Web/article_share?type=web')}">web</a></i>
	            <i class="<?php echo $_GET['type']==logo?active:'';?>"><a href="{:U('Web/article_share?type=logo')}">logo</a></i>
	            <i class="<?php echo $_GET['type']==interface1?active:'';?>"><a href="{:U('Web/article_share?type=interface1')}">interface</a></i>
	            <i class="<?php echo $_GET['type']==media?active:'';?>"><a href="{:U('Web/article_share?type=media')}">media</a></i>
			</div>
			<div class="nav-bottom">
				<span>web</span>
				<span>logo</span>
				<span>interface</span>
				<span>media</span>
			</div>
		</div>
	</div>
	<!--案例列表-->
	<div class="recommend container">
		<ul class="recommend-list article_list" id="article_list">
		<foreach name="articleList" item="vo" key="k" >
            <li class="col-md-4 col-sm-6">
                <div class="recommend-box">
                    <img class="img-responsive" src="{$vo['main_img']}" alt="">
                    <a class="li-btn li-btn-click" href="#{$vo['Id']}"><b><i></i></b></a>
                </div>
            </li>
        </foreach>
		</ul>
	</div>
	<div class="content-logo">
	    <img src="__PUBLIC__/web/img/logo_foot.png">
	</div>
	<!-- 小白科普 -->
	<div class="container">
	<div class="mark">
		<img src="{$articleList[0]['main_img']}" alt="">
		<div class="mark-content">
			<h2>{$articleList[0]['title']}</h2>
			<span>时间 : {$articleList[0]['time']|date='Y年m月d日',###}</span>
			<span class="mark-content-right">产品类型 : {$articleList[0]['type']}</span>
			<p>推荐阅读：</p>
			<ul class="article_list">
				<foreach name="recommendedList" item="vo" key="k" >
				<li><a href="#{$vo['Id']}"class="li-btn-click">《{$vo['title']}》</a></li>
				</foreach>
			</ul>
		</div>
	</div>
	</div>
	<!-- 主要内容 -->
	<div class="container main_article">
		<div id="article_content">
			{$articleList[0]['content']}
		</div>
		<!-- 相关文章 -->
		<div>
			<h4>相关文章</h4>
			<ul class="article_list">
				<foreach name="articleList" item="vo" key="k" >
				<li><a href="#{$vo['Id']}" class="li-btn-click">&deg;&nbsp;&nbsp;{$vo[title]}</a></li>
				</foreach>
			</ul>
			<a href="#">&larr;设计师如何找到合适的设计团队</a>
			<a href="#" class="next_article">拒绝平庸：优秀的Web登录页面设计&rarr;</a>
		</div>
	</div>
	<!-- 评论  -->
	<form class="container form-inline" id="contact_form" method="post" action="{:U('Web/commentUpload')}">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="昵称" name="username">
		</div>
		<div class="form-group">
			<input type="email" class="form-control" placeholder="邮箱" name="mail">
		</div>
		<div class="form-group">
			<input type="url" class="form-control form-control-one" placeholder="网址">
		</div>
		<textarea class="form-control formTwo" placeholder="留下你的想法" name="content"></textarea>
		<button type="submit" class="btn btn-primary" >评论</button>
	</form>
	<div id="comment">
		<foreach name="commentList" item="vo" key="k" >
			<div class="comment-bg">
				<ul class="container comment-ul">
					<li class="comment-img"><img src="{$vo['user_img']}" alt=""></li>
					<li class="comment-word">
						<span>{$vo['username']}</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>{$vo['time']}</span>
						<p>{$vo['content']}</p>
					</li>
				</ul>
			</div>
		</foreach>
	</div>
    <!--底部-->
    <div class="footer">
    	<h3><a href="#" id="more">加载更多</a></h3>
        <div class="footer-con">
            <p>找设计网打造交流平台。</p>
            <p class="design">设计师将图标上传到 die1218.xyz平台，用户可以自定义下载便于设计师自由调整与调用。<span class="enter">友情链接</span></p>
            <p class="where">转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源，商业媒体及纸媒请先联系<span class="ued">UED优秀网页设计</span><span class="china">Bootstrap中文网</span><span class="mic">微博</span></p>
        </div>
    </div>
	
	<script src="__PUBLIC__/web/js/jquery.min.js"></script>
	<script src="__PUBLIC__/web/js/bootstrap.js"></script>
	<script>
		$(function(){
			$("#more").on("click",function(){
				$.ajax({
					
				})
			})
		})
		// $('#more')function() {
			// body...
		}
	</script>
	<script>
		$(function(){
			$(".article_list li .li-btn-click").on("click",function(){
				var id=$(this).attr("href").substring(1);
				$.post("{:U('Web/ajax_article')}",{id:id},function(data){
					$("#article_content").html(data['content']);
				});
			});
			 var iItem = $(".nav-top i");
			 var spanItem=$(".nav-bottom span");
		    for (var i = -160, j = 0; j < iItem.length; j++, i += 80) {
		        iItem.eq(j).css("margin-left", i + "px");
		        spanItem.eq(j).css("margin-left", i + "px");
		    }
		})	
	</script>
</body>
</html>